<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <!-- <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"> -->
    <style>
        .layui-layout-admin .layui-logo {
            left: 2rem;
            text-align: left;
            color: #fff;
        }

        #card-show a:hover {
            background-color: yellow;
            bottom: 2rem;
        }
    </style>
</head>

<body style="background-color: #F3F5F6;">
    <div class="layui-layout layui-layout-admin">

        <div class="layui-row">
            <div class="layui-col-xs1 layui-col-sm2 layui-col-md3">
                &nbsp;
            </div>
            <div class="layui-col-xs10 layui-col-sm8 layui-col-md6">
                <div class="layui-panel" style="margin-top: 20%;">
                    <div class="layui-row">
                        <div class="layui-col-xs1 layui-col-sm2 layui-col-md3">
                            &nbsp;
                        </div>
                        <div class="layui-col-xs10 layui-col-sm8 layui-col-md6">

                            <form class="layui-form layui-form-pane" action="">
                                <h1 style="text-align: center;margin-top: 20%;">登录</h1>

                                <div class="layui-form-item" style="margin-top: 10%;">
                                    <label class="layui-form-label">账号</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="username" required lay-verify="required"
                                            placeholder="请输入账号" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">密码</label>
                                    <div class="layui-input-block">
                                        <input type="password" name="password" required lay-verify="required"
                                            placeholder="请输入密码" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item" style="margin-top: 10%;margin-bottom: 20%;">
                                    
                                        <div class="layui-row">
                                            <div class="layui-col-md2 layui-col-xs1 layui-col-sm2">
                                                &nbsp;
                                            </div>
                                            <div class="layui-col-md1 layui-col-xs1 layui-col-sm1">
                                                <button class="layui-btn" lay-submit lay-filter="formDemo">登录</button>
                                            </div>
                                            <div class="layui-col-md6 layui-col-xs6 layui-col-sm6">
                                                &nbsp;
                                            </div>
                                            <div class="layui-col-md1 layui-col-xs1 layui-col-sm1">
                                                <button type="button" onclick="register()" class="layui-btn layui-btn-primary">注册</button>
                                            </div>
                                            <div class="layui-col-md2 layui-col-xs1 layui-col-sm1">
                                                &nbsp;
                                            </div>
                                        </div>
                                    
                                </div>
                            </form>
                        </div>
                        <div class="layui-col-xs1 layui-col-sm2 layui-col-md3">
                            &nbsp;
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs1 layui-col-sm2 layui-col-md3">
                &nbsp;
            </div>
        </div>


        <div class="layui-footer" style="left: 0rem;">
            <!-- 底部固定区域 -->
            © layui.com - 底部固定区域
        </div>
    </div>

    <script src="/static/layui/layui.js"></script>
    <!-- <script src="./bootstrap/js/bootstrap.min.js"></script> -->
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script>
        function register(){
            window.location.href="/register"
        }

        layui.use(["form", "layer"], function () {
            var form = layui.form;
            var layer = layui.layer;

            form.on("submit", function (data) {

                // console.log(data.field);
                let df = data.field;
                let username = df.username.trim();
                let password = df.password.trim();
                
                console.log(username);
                console.log(password);

                axios({
                    method:"post",
                    url:"/loginDone",
                    data:{
                        username:username,
                        password:password
                    }
                }).then(function(res){
                        res=res.data;
                        let msg = res.msg;
                        if(res.code === 200){
                            window.location.href = "/"
                        }else{
                            layer.msg(msg);
                        }
                    })


                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            })
        })
    </script>
</body>

</html>